<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>后台管理-登陆</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
	<!--[if lt IE 9]>
	<link rel="stylesheet" href="../css/bootstrap.min.css"/>
	<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
	<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
	<style>
		body {background-image:url("../images/bg.jpg");height:100%;width:100%;}
		#container{height:100%;width:100%;}
		input:-webkit-autofill {-webkit-box-shadow:inset 0 0 0 1000px #fff;background-color:transparent;}
		.admin-login-background {width:300px;height:300px;position:absolute;left:50%;top:40%;margin-left:-150px;margin-top:-100px;}
		.admin-header {text-align:center;margin-bottom:20px;color:#ffffff;font-weight:bold;font-size:40px}
		.admin-input {border-top-style:none;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;height:50px;width:300px;padding-bottom:0px;}
		.admin-input::-webkit-input-placeholder {color:#a78369}
		.layui-icon-username {color:#a78369 !important;}
		.layui-icon-username:hover {color:#9dadce !important;}
		.layui-icon-password {color:#a78369 !important;}
		.layui-icon-password:hover {color:#9dadce !important;}
		.admin-input-username {border-top-style:solid;border-radius:10px 10px 0 0;}
		.admin-input-verify {border-radius:0 0 10px 10px;}
		.admin-button {margin-top:20px;font-weight:bold;font-size:18px;width:300px;height:50px;border-radius:5px;background-color:#a78369;border:1px solid #d8b29f}
		.admin-icon {margin-left:260px;margin-top:10px;font-size:30px;}
		i {position:absolute;}
		.admin-captcha {position:absolute;margin-left:205px;margin-top:-40px;}
	</style>
</head>
<body>
<div id="container">
	<div></div>
	<div class="admin-login-background">
		<div class="admin-header">
			<span>登录</span>
		</div>
		<form th:action="@{/login}" id="myform" method="post"  class="layui-form">
<!--			<div th:if="${param.error!=null}">-->
<!--				<div>-->
<!--					<p>用户名或密码错误</p>-->
<!--				</div>-->

			<div th:if="${param.error!=null}">
				<div id="myone"></div>
			</div>

			<div>
				<i class="layui-icon layui-icon-username admin-icon"></i>
				<input type="text" name="username" id="username" placeholder="请输入用户名" class="layui-input admin-input admin-input-username">
			</div>
			<div>
				<i class="layui-icon layui-icon-password admin-icon"></i>
				<input type="password" name="password" id="password" placeholder="请输入密码" class="layui-input admin-input">
			</div>
<!--			<button class="layui-btn admin-button">登 陆</button>-->
		</form>
		<button id="TencentCaptcha" class="layui-btn admin-button" data-appid="2016307418"
				  onclick="subForm()">登 陆</button>
<!--		data-cbfn="callback"-->
	</div>
</div>
<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
		function subForm() {
			layui.use(['layer'],function () {
				var layer = layui.layer;
				var checkUserName = document.getElementById("username").value;
				var checkPassword = document.getElementById("password").value;
				if (checkUserName == '') {
					layer.msg("用户名为空")
				} else if (checkPassword == '') {
					layer.msg("密码为空")
				} else {
					var captcha1 = new TencentCaptcha('2016307418', function (res) {
						if (res.ret === 0) {
							console.log(res.randstr)
							console.log(res.ticket)
							$.ajax({
								type: "POST",
								url: "/login/verify",
								data: {
									"ticket": res.ticket,
									"rand": res.randstr
								},
								success: function (data) {
									if (data === 1) {
										console.log(data)
										into();//验证成功，登录验证
									} else {
										layer.msg("验证失败")
									}
								}
							})
						} else if (res.ret === 2) {
							layer.msg("验证关闭")
						}
					});
					captcha1.show();
				}

			});
		}

		function into() {
			$('#myform').submit();//提交登录表单
		}
		$(document).ready(function () {
			$('#myone').show(function () {
				layui.use(['layer'],function () {
					var layer = layui.layer;
					layer.msg("用户名或密码错误")
				})
			})
		});
</script>
</body>
</html>